<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
 String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<title>WORD版分析报告导出</title>
<link rel='stylesheet' text="type/css"
	href="<%=request.getContextPath()%>/lib/inputStyle/input.css">
<script src="<%=request.getContextPath()%>/lib/inputStyle/input.js"></script>
<style type="text/css">
#hospInfo {
	width: 550px;
	margin-top: 40px;
	margin-bottom: 40px;
	text-align: center;
	padding: 20px 50px;
	border-radius: 10px;
	border: 1px solid #ddd;
	box-shadow: 0 15px 80px rgba(0, 0, 0, .2);
	background-color: white;
}

.ue-animation, [required="required"] {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: .2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .8s;
	-moz-animation-delay: .2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .8s;
	-ms-animation-delay: .2s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	-o-animation-duration: .8s;
	-o-animation-delay: .2s;
	-o-animation-timing-function: ease;
	-o-animation-fill-mode: both;
	animation-duration: .8s;
	animation-delay: .2s;
	animation-timing-function: ease;
	animation-fill-mode: both
}

.ue-shake {
	-webkit-animation-name: shake;
	-moz-animation-name: shake;
	-o-animation-name: shake;
	animation-name: shake
}

@
-webkit-keyframes shake { 0%,100%{
	-webkit-transform: translateX(0);
	border: 1px solid #aaa;
}

10%,30%,50%,70%,90%{
-webkit-transform
:translateX(-10px)
}
20%,40%,60%,80%{
-webkit-transform:translateX(10px);
border:1px solid red;
}
}
@
-moz-keyframes  { 0%,100%{
	-moz-transform: translateX(0);
	border: 1px solid #aaa;
}

10%,30%,50%,70%,90%{
-moz-transform:translateX(-10px)
}
20%,40%,60%,80%{
-moz-transform:translateX(10px);
border:1px solid red ;
}
}
@
-o-keyframes shake { 0%,100%{
	-o-transform: translateX(0);
	border: 1px solid #aaa;
}
10%,30%,50%,70%,90%{
-o-transform:translateX(-10px)}
20%,40%,60%,80%{
-o-transform:translateX(10px);
border 1px solid red;
}
}
@
keyframes shake { 0%,100%{
	transform: translateX(0);
	border: 1px solid #aaa;
}

10%,30%,50%,70%,90%{
transform:translateX(-10px)
}
20%,40%,60%,80%{
transform:translateX(10px);
border:1px solid red;
}
}
#sdate, #edate, #benchmarkYear {
	width: 100px;
	display: inline-block;
	background-color: white;
}

.version {
	font-size: 10px;
	position: relative;
	top: -20px;
}

canvas {
	position: absolute;
	margin: 0;
}

.under-line-form .form-horizontal input[type="text"], .form-horizontal textarea, .form-horizontal textarea:focus {
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #333;
	border-radius: 0;
	font-size: 18px;
	color: #000;
}

label {
	font-weight: normal;
}

.form-level label {
	border: 1px solid #eee;
	padding: 5px;
	text-align: center　 !important;
	border-radius: 5px;
}

.form-level .control-label {
	text-align: center;
	margin: 2px 0;
}

.form-level input {
	display: none !important;
}

.form-level .select {
	background-color: #5CB85C;
}
.formselect{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
/*  医院类型 */
.form-level-report-type label {
	border: 1px solid #eee;
	padding: 5px;
	text-align: center　 !important;
	border-radius: 5px;
}

.form-level-report-type  {
	text-align: center;
	margin: 2px 0;
}

.form-level-report-type input {
	display: none !important;
}

.form-level-report-type .select{
	background-color: #5CB85C;
}
.panel-header, .panel-body {
    border-width: 1px;
    border-style: none;
}
</style>
</head>
<body>
	<canvas id="bg_canvas"></canvas>
	
	<div class="container-fluid" >
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-12">
						<h2 align="center">
							分析报告导出
						</h2>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div id="card">
							<div class="center-block under-line-form" id="hospInfo"
								style="position: relative;">
								<div class="row">
									<div class="col-md-12">
										<h4>
											<i class="fa fa-hospital fa-lg text-blue"></i>&nbsp;&nbsp;医院基本情况
										</h4>
									</div>
								</div>
								<form class="form-horizontal" id="hospForm">
									<div class="row">
										<label class="col-md-3 control-label ">医院名称：</label> <input
											type="text" class=" col-md-6 form-control"
											name="hospName" id="hospName" required="required"
											value="东华">
									</div>
									<div class="row">
										<label class="col-md-3 control-label ">建院时间：</label> <input
											type="text" class=" col-md-6 form-control"
											name="hospBuildYear" id="hospBuildYear" required="required"
											value="1949">
									</div>
									<div class="row">
										<label class="col-md-3 control-label ">医院级别：</label>
										<div class="col-md-9 form-level">
											<div class="row">
												<label for="3A" class="col-md-4 control-label select"
													style="margin-left: 0px;">三级甲等</label> <input type="radio"
													class="form-control" name="hospLevel" id="3A" value="三级甲等"
													checked="checked"> <label for="3B"
													class="col-md-4 control-label">三级乙等</label> <input
													type="radio" class="form-control" name="hospLevel" id="3B"
													value="三级乙等"> <label for="2A"
													class="col-md-4 control-label">二级甲等</label> <input
													type="radio" class="form-control" name="hospLevel" id="2A"
													value="二级甲等"> <label for="2B"
													class="col-md-4 control-label">二级乙等</label> <input
													type="radio" class="form-control" name="hospLevel" id="2B"
													value="二级乙等"> <label for="2"
													class="col-md-4 control-label">二级</label> <input
													type="radio" class="form-control" name="hospLevel" id="2"
													value="二级"> <label for="1A"
													class="col-md-4 control-label">一级甲等</label> <input
													type="radio" class="form-control" name="hospLevel" id="1A"
													value="一级甲等"> <label for="1B"
													class="col-md-4 control-label">一级乙等</label> <input
													type="radio" class="form-control" name="hospLevel" id="1B"
													value="一级乙等"> <label for="1"
													class="col-md-4 control-label">一级</label> <input
													type="radio" class="form-control" name="hospLevel" id="1"
													value="一级"> <label for="C"
													class="col-md-4 control-label">未评</label> <input
													type="radio" class="form-control" name="hospLevel" id="C"
													value="未评">
											</div>
										</div>
									</div>
									  	<div class="row">
									<label class="col-md-3 control-label-report" style="margin-top:8px;">医院类型：</label>
									<div class="col-md-9 form-level-report-type">
									<div class="row"> 
									    <label for="wordDRGsReport_AType" class="col-md-4 control-label-report select" style="margin-left: 0px;">综合医院</label> 
									    <input type="radio" class="form-control" name="hospType" id="wordDRGsReport_AType" value="综合医院"  checked="checked"  />  
										<label for="wordDRGsReport_BType" class="col-md-4 control-label-report " >中医医院</label> 
										<input type="radio" class="form-control" name="hospType" id="wordDRGsReport_BType" value="中医医院"  > 
										<label for="wordDRGsReport_CType" class="col-md-4 control-label-report" >专科医院</label> 
										<input type="radio" class="form-control" name="hospType" id="wordDRGsReport_CType" value="专科医院"  >  
									</div>
									</div>
									</div> 
									<div class="row">
										<label for="hospBedNum" class="col-md-3 control-label">核定床位数：</label>
										<input type="text" class=" col-md-3 form-control"
											name="hospBedNum" id="hospBedNum" required="required"
											value="1"> <label for="hospRealBedNum"
											class="col-md-3 control-label">实际床位数：</label> <input
											type="text" class="col-md-3 form-control"
											name="hospRealBedNum" id="hospRealBedNum" required="required"
											value="1">
									</div>
									<div class="row">
										<label for="hospCaseNum" class="col-md-3 control-label">年门急诊量：</label>
										<input type="text" class=" col-md-3 form-control"
											name="hospCaseNum" id="hospCaseNum" required="required"
											value="1"> <label for="hospDocNum"
											class="col-md-3 control-label">医师数量：</label> <input
											type="text" class="col-md-3 form-control" name="hospDocNum"
											id="hospDocNum" required="required" value="1">
									</div>
									
								    <div class="row" >	
									<div style="margin-left:10px;">			
									<label style="float: left;margin-left:10px;padding-top: 5px;">是否检测数据完整性：</label>
									<span id="isCompleteId" style="float: left; margin-left: 7px;padding-top: 5px;font-size: 16px;">
									<i class='input_style radio_bg'> <input  type="radio" name="isComplete" value="1" class="szyword">
									     </i>&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;
									<i class='input_style radio_bg radio_bg_check'> <input  type="radio" name="isComplete"value="0" class="szyword"></i>&nbsp;&nbsp;否
									</span>
									</div>
									</div>		
									<div class="row">
										<div class="panel panel-success" id="exportResult">
											<div class="panel-heading text-left"><i class=" icon-bar-chart"></i>&nbsp;生成报告</div>
											<div class="panel-body" style="background-color: #f9f9f9;">
											<div class="row" >	
												<div style="margin-left:10px;">			
												<label style="float: left;margin-left:10px;padding-top: 5px;">分析报告类型：</label>
												<span id="isMonthId" style="float: left; margin-left: 7px;padding-top: 5px;font-size: 16px;">
												<i class="input_style radio_bg radio_bg_check" onclick="ismonth('month')"> <input  type="radio" name="isMonth" value="month" class="szyword" checked>
												     </i>&nbsp;&nbsp;月度&nbsp;&nbsp;&nbsp;
											<!-- 	<i class="input_style radio_bg" onclick="ismonth('quater')"> <input  type="radio" name="isMonth"value="quarter" class="szyword"></i>&nbsp;&nbsp;季度 -->
												</span>
												</div>
											</div>	
											<div style="float: left;">
												<table
													style="width: 100%; margin-bottom: 10px; text-align: left;">
													<tr>
														<td>&nbsp;</td>
													</tr>
													
													<tr>
														<td>日期选择：<input class="form-control" id="sdate">
														<button id="generateAnalysisBtn" type="button" class="btn btn-success"  style="margin-left: 20px;margin-top: -3px;"><i class="fa fa-cog fa-fw"></i>生成报告&nbsp;&nbsp;</button>
														</td>
													</tr>
												</table>
											
												
											</div>
											<div class="panel-footer1"></div>
										</div>
									</div>
							</div>

						</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<div class="row" id="t2" style="display:none">
		<div class="col-md-12">
			<div class="panel panel-success" id="chart_panel" >
				<div class="panel-heading text-left">生成的图表：</div>
				<div class=" text-center">
					<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
					<div class="row">
						<div class="col-md-6">
							<div id="monthHospImageOne" style=" margin-left:30px; width: 1050px; height: 350px;"></div>
						</div>
					</div>
					<div class="szyEcharsTitle" style="margin-left:30px;"><span style="margin-left:30px; font-size: 25px;  margin-top: 10px; float: left;">入组率变化趋势图</span></div>
									
					<div class="row">
						<div class="col-md-12">
							<div id="monthHospImageTwo" style="width: 1000px; height: 450px;"></div>
						</div>
					</div>
					<div class="szyEcharsTitle" style="margin-left:30px;"><span style="margin-left:30px; font-size: 25px;  margin-top: 10px; float: left;">病例未入组原因分布图</span></div>
					
					<div class="row">					
						<div class="col-md-12">
							<div id="monthHospImageThree" style="width: 1000px; height: 450px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">全院病例难度分布图</span></div>
				
					<div class="row hosp-content">					
						<div class="col-md-12">
							<div id="monthHospImageFour" style="width: 1100px; height: 450px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle hosp-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">MDC专业病组覆盖率分布图</span></div>
				
					<div class="row hosp-content">					
						<div class="col-md-12">
							<div id="monthHospImageEight" style="width: 1100px; height: 450px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle hosp-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">MDC专业时间消耗指数和费用消耗指数象限分布图（同比正向变好）</span></div>
				
					<div class="row hosp-content">					
						<div class="col-md-12">
							<div id="monthHospImageNine" style="width: 1100px; height: 450px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle hosp-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">MDC专业时间消耗指数和费用消耗指数象限分布图（同比负向变差）</span></div>
	
					<div class="row hosp-content">					
						<div class="col-md-12">
							<div id="monthHospImageTen" style="width: 1100px; height: 450px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle hosp-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">科室总权重及其出院病例数全院占比分布图（总权重前10）</span></div>

					<div class="row hosp-content">					
						<div class="col-md-12">
							<div id="monthHospImageEleven" style="width: 1100px; height: 450px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle hosp-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">科室时间消耗指数和费用消耗指数象限分布图（同比正向变好）</span></div>

					<div class="row hosp-content">					
						<div class="col-md-12">
							<div id="monthHospImageTwelve" style="width: 1100px; height: 450px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle hosp-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">科室时间消耗指数和费用消耗指数象限分布图（同比负向变差）</span></div>

					<div class="row hosp-content">					
						<div class="col-md-12">
							<div id="monthHospImageOneNew" style="width: 1100px; height: 550px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle hosp-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">手术与非手术占比图</span></div>

					<div class="row hosp-content">					
						<div class="col-md-12">
							<div id="monthHospImageTwoNew" style="width: 1100px; height: 550px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle hosp-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">各级手术分布占比图</span></div>

					<div class="row dep-content">					
						<div class="col-md-12">
							<div id="monthHospImageFourteen" style="width: 1100px; height: 450px;"></div>
						</div>
					</div>					
					<div class="szyEcharsTitle dep-content" style="margin-left:30px;"><span style="margin-left:30px; float: left; font-size: 25px; margin-top: 10px;">科室DRG病组有效占比变化趋势图</span></div>

				</div>
			</div>
		</div>
	</div>
	
	
	<script type="text/javascript">
		$(document).ready(function() {

					$("#" + tabId + " #hospBuildYear").datetimepicker({
						startView : 'decade',
						minView : 'decade',
						format : 'yyyy',
						autoclose : true
					});
					
					$('#'+tabId+' .dep-content').hide();
					$('#'+tabId+' #depCodeID').on('change',function(){
						if ($(this).val()==='') {
							$('#'+tabId+' .hosp-content').show();
							$('#'+tabId+' .dep-content').hide();
						} else {
							$('#'+tabId+' .dep-content').show();
							$('#'+tabId+' .hosp-content').hide();
						}
					})
					
					//获取当前系统库中所有的科室
					$.ajax({
						type : "post",
						url : contextPath + "/Department/findAllDep.dhc",
						data : "",
						success : function(result) {
							if (result.success) {
								var data = result.data;
								var optStr = '<option value="" selected="selected">' + "全院"+ '</option>';
								$('#'+tabId+' #depCodeID').html('');
								for(var i in data){
									optStr = optStr + '<option value="' + data[i].depCode+ '">' + data[i].depName + '</option>';								
								}
								$("#" + tabId + " #depCodeID").append(optStr);
								
							}
						}

					});
					
 					//加载筛选时间范围
					$.ajax({
						url : contextPath + "/monthAnalisisReport/getDataYear.dhc",
						type : "post",
						data : "",
						success : function(result) {
							if (result.success) {
								var data = result.data;
								$('#'+tabId+' #year').html('');
								for(var i in data){
									$('#'+tabId+' #year').append('<option value='+data[i].YEAR+'>'+data[i].YEAR+'</option>');
								}
							}
						}
					}); 
					
					ismonth('month');
				});
		
		function ismonth(isMonth){
			if(isMonth=='month'){
				$('#'+tabId+' #sdate').parent().css('display','block');
				$('#'+tabId+' #year').parent().css('display','none');
				 var date=new Date;
				 var year=date.getFullYear(); 
				 var month=date.getMonth();
				 month =(month<10 ? "0"+month:month); 
				 var mydate = (year.toString()+'-'+month.toString());
				$("#" + tabId + " #sdate").val(mydate);
				$("#" + tabId + " #sdate").datetimepicker({
					format : "yyyy-mm",
					autoclose : true,
					todayBtn : true,
					minView : 3,
					startView :3,
					language : 'zh-CN'
				});
			}else if(isMonth=='quater'){
				$('#'+tabId+' #sdate').parent().css('display','none');
				$('#'+tabId+' #year').parent().css('display','block');

			}
		};
	</script>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/js/simplereport/calculate.js"></script>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/js/simplereport/monthAnalysisReport.js"></script>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/js/simplereport/reportDrawCharts.js"></script>
</body>
</html>